<template>
  <x-drawer :visible.sync="show" title="填写订单" cancel round @cancel="handleCancel">
    <view class="x-product-sku">
      <x-loading v-if="loading" />
      <template v-else>
        <view class="_product">
          <view class="_pic">
            <x-image :src="formatOss(productMainPic)" />
          </view>
        </view>
        <view v-if="skuMode === 3" class="_sku _combo">
          <view class="_dl">
            <view class="_dt">套餐</view>
            <view class="_dd">
              <view
                v-for="item in comboSkuInfo"
                :key="item.id"
                :class="{'is-active': selectedCombo === item.id}"
                class="_li"
                @click="handleChangeCombo(item)"
              >
                {{ item.comboName }}
              </view>
            </view>
          </view>
        </view>
        <view v-if="productSkuInfo" class="_sku">
          <p-sku :list.sync="productSkuInfo" @change="handleChangeSku" />
        </view>
      </template>
    </view>
  </x-drawer>
</template>

<script>
import XDrawer from '@/components/x-drawer';
import XImage from '@/components/x-image';
import XLoading from '@/components/x-loading';
import PSku from './p-sku';

export default {
  name: 'XProductSku',
  components: {
    XDrawer,
    XLoading,
    XImage,
    PSku
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    // 商品ID
    productId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      loading: true,
      show: this.visible,
      // 套餐
      comboSkuInfo: null,
      selectedCombo: null,
      // 多规格
      productSkuInfo: null,
      productSkuList: null,
      skuMode: null,
      productMainPic: null
    };
  },
  computed: {
    // 匹配当前选中的sku详细数据
    currentSku() {
      if (this.productSkuList) {
        return this.productSkuList.find(item => item.attr.every((spec) => spec.value === this.productSkuInfo.find((s) => s.name === spec.name)?.selected));
      } else {
        return null;
      }
    }
  },
  watch: {
    visible(value) {
      this.show = value;
    }
  },
  created() {
    this.getProductDetail();
  },
  methods: {
    handleCancel() {
      this.$emit('update:visible', false);
    },
    // 格式化图片
    formatOss(url) {
      return this.$tools.formatOss(url, 200);
    },
    getProductDetail() {
      this.$http({
        url: '/product/page/product/app/detail',
        method: 'get',
        report: false,
        data: {
          productId: this.productId
        }
      }).then((res) => {
        // this.detail = res.data;
        // skuMode 规格模式：1-统一规格；2-多规格；3-套餐模式
        const { productSkus, productMainPic, skuMode, productComboList } = res.data || {};
        let comboSkuInfo;
        let selectedCombo;
        let productSkuInfo;
        let productSkuList;
        // 格式化sku数据
        if (skuMode === 2) {
          const { skuInfo, skuList } = this.formatSku(productSkus);
          productSkuInfo = skuInfo;
          productSkuList = skuList;
        } else if (skuMode === 3) {
          comboSkuInfo = productComboList.map(item => {
            const { id, comboName, comboSellingPoint, productSku } = item;
            const { skuInfo, skuList } = this.formatSku(productSku);
            return {
              id,
              comboName,
              comboSellingPoint,
              skuInfo,
              skuList
            };
          });
          // 默认选中第一个套餐
          const { id, skuList, skuInfo } = comboSkuInfo[0];
          productSkuInfo = skuInfo;
          productSkuList = skuList;
          selectedCombo = id;
        }

        // console.log(JSON.stringify(productSkuInfo));
        // console.log(comboSkuInfo);
        Object.assign(this, {
          comboSkuInfo,
          selectedCombo,
          productSkuInfo,
          productSkuList,
          productMainPic,
          skuMode,
          loading: false
        });
      });
    },
    // 格式化sku
    formatSku(productSkus) {
      const skuInfo = [];
      const skuList = productSkus.map(sku => {
        const { skuSpec, id, costPrice, skuGroupPrice, thumbImg, skuPrice } = sku;
        const attr = skuSpec.map(item => {
          // 根据完整的sku数据生成简易的规格数据
          const find = skuInfo.find(s => s.name === item.specName);
          if (find) {
            if (!find.value.some(s => s === item.specValue)) {
              find.value.push(item.specValue);
            }
          } else {
            skuInfo.push({
              name: item.specName,
              value: [item.specValue],
              selected: item.specValue
            });
          }
          return {
            name: item.specName,
            value: item.specValue
          };
        });
        return {
          id,
          costPrice,
          skuGroupPrice,
          attr,
          skuPrice,
          thumbImg
        };
      });
      return {
        skuInfo,
        skuList
      };
    },
    // 切换套餐
    handleChangeCombo(item) {
      Object.assign(this, {
        selectedCombo: item.id,
        productSkuInfo: item.skuInfo,
        productSkuList: item.skuList
      });
    },
    // 切换sku
    handleChangeSku() {
      console.log(JSON.stringify(this.currentSku));
    }
  }
};
</script>

<style lang="scss" scoped>
  .x-product-sku {
    height: 70vh; overflow-y: auto;
    ._product{
      padding: 0 26px 26px; display: flex; align-items: center;
      ._pic{ width: 130px; height: 130px;}
    }
    ._sku{
      padding: 20px;
      & + ._sku { padding-top: 0;}
      &._combo{ padding-bottom: 0;}
    }
    ._dt{ font-size: 30px; color: $uni-color-default; padding-bottom: 20px;}
    ._dd{
      display: flex; flex-wrap: wrap;
      ._li{
        min-width: 144px;  border-radius: 10px;   color: $uni-color-default; text-align: center; padding: 18px 16px; font-size: 28px; line-height: 28px; margin-right: 30px; margin-bottom: 30px; background: $uni-bg-color-grey;
        &.is-active{ background-color: #CF0101; color: #fff;}
      }
    }
  }
</style>
